<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            *{
                  margin: 0;
                  padding: 0;
            }
            .container{
                  width: 1130px;
                  margin: 0 auto;
            }
            .container::after{
                  content: "";
                  display: block;
                  clear: both;
            }

            .container .box{
                  width: 210px;
                  float: left;
                  margin: 0 20px 20px 0;
            }
            .container .box:nth-of-type(5n){
                  margin: 0 0 20px 0;
            }     


            .box p{
                  margin-bottom: 1px;
                  position: relative;
                  height: 20px;
                  line-height: 20px;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  padding: 10px 5px;
            }

            .container img{
                  width: 100%;
                  height: 158px;
            }

            .pagination {
                  text-align: center;
            }

            .pagination span, .pagination strong , .pagination em{
                  display: inline-block;
                  width: 30px;
                  height: 30px;
                  line-height: 30px;
                  background-color: skyblue;
                  border:2px solid snow;
                  margin:0 20px 0 0 ;
                  cursor: pointer;
                  border-radius: 3px;
            }
            .pagination em{
                  width: 100px;
                  border-radius: 5px;
                  background-color: #ddd;
            }
            .pagination b {
                  display: inline-block;
                  width: 30px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  line-height: 30px;
                  margin:0 20px 0 0 ;

            }
            .pagination strong{
                  width: 80px;
                  border-radius: 5px;
            }

            .pagination span.active{
                  background-color: #000;
                  color: #fff;
                  border-radius: 10px;
            }
            
      </style>
</head>

<body>
      <div class="container">
            
      </div>

      <div class="pagination"></div>
      <script src="./08_data.js"></script>
      <script src="./utils.js"></script>
      <script>

            // - 我们要切换页面的时候本质上就是改变实例对象之中的下标; 
            // - 调用render功能函数重新渲染页面; 

            class Pagination{
                  constructor(data , options ){
                        // 创建默认参数; 
                        Object.assign(this , {
                              // 一页默认显示十条数据; 
                              show_num : 10 ,
                              // 当前的页码 ; 
                              index : 0 ,
                              // 分页内容总条数; 
                              count : data.length ,
                              // 中间显示的页码数量; 
                              show_page_count : 5 

                        } , options )
                        this.data = data;
                        this.container = document.querySelector(".container");
                        this.pagination = document.querySelector(".pagination");
                        // 计算总页数;
                        this.total_page_num = Math.ceil(  this.count / this.show_num);
                        // show_page_count 数据必须是奇数;
                        if( this.show_page_count % 2 !== 1 ){
                              this.show_page_count ++;
                        }


                        this.render();
                        this.renderBullet();
                        this.bindEvent();
                  }
                  bindEvent(){
                        on( this.pagination, "click" , "span" , ( e )=>{
                              this.index = e.origin.innerText - 1;
                              this.render();
                              this.renderBullet();
                        })
                        on( this.pagination, "click" , ".start" , ( e )=>{
                              this.index = 0;
                              this.render();
                              this.renderBullet();
                        })
                        on( this.pagination, "click" , ".end" , ( e )=>{
                              this.index = this.total_page_num - 1;
                              this.render();
                              this.renderBullet();
                        })
                        on( this.pagination, "click" , ".next" , ( e )=>{
                              this.add();
                        })
                        on( this.pagination, "click" , ".prev" , ( e )=>{
                              this.reduce();
                        })

                        this.pagination.addEventListener( "selectstart" , ( e )=>{
                              e.preventDefault();
                        })
                  }
                  render(){
                        // 页码和范围的关系 : 
                        // 0    : 0 ~ 9 
                        // 1    : 10 ~ 19
                        // n    : n * 10 ~ (n + 1) * 10 - 1 
                        let html = "";
                        for(let i = this.index * this.show_num ; i < (this.index + 1) * this.show_num ; i ++){
                              // 如果渲染的数据不存在，那么我们就略过本次拼接;
                              if(this.data[i] === undefined) continue;
                              html += `<div class="box">
                                    <img src="${ this.data[i].url }" alt="">
                                    <p>${ this.data[i].title }</p>
                              </div>`
                        }
                        this.container.innerHTML = html;
                  }
                  renderBullet(){
                        //创建结构的核心在于，当前页面有多少条数据; 
                        // - 总页数计算方式 : 总数量 / 每页显示数量 向上取整  
                        let html = "";

                        html += "<em class='prev'>上一页</em>"
                        html += "<strong class='start'>开头</strong>"

                        // start : 页码的起始点; 
                        // end   : 页码的终点; 

                        let start = this.index - 1;
                        let end   = this.index + 3; 

                        
                        // - 判定分页的起始点; 
                        if( this.index <= 2 ){
                              start = 1; 
                              end = start + this.show_page_count;
                        }
                        
                        //  this.total_page_num > this.show_page_count + 1  && this.index   : 
                        if( this.total_page_num > this.show_page_count + 1  && this.index  >= this.total_page_num - 2){
                              end = this.total_page_num ; 
                              start = end - 5 ;
                        }     

                        // - end 极值判断; 
                        // - end 的最大值不能超过页码总数; 

                        if( end >= this.total_page_num ){
                              end = this.total_page_num ; 
                        }
                        if(!( this.total_page_num > this.show_page_count + 1 )){
                              start = 1; 
                        }
                       
                        if(  this.total_page_num > this.show_page_count + 1 && this.index >= 3 ){
                              html += "<span>1</span>"
                              html += "<b>...</b>"
                        }

                        // 带有省略号的渲染; 
                        for(let i = start ; i <= end ; i ++){
                              html += `<span ${ i - 1 === this.index ? "class='active'" : ""}>${ i }</span>`
                        }
                        
                        if( this.total_page_num > this.show_page_count + 1  && this.index <= this.total_page_num - 4){
                              html += "<b>...</b>"
                              html += "<span>" + this.total_page_num + "</span>"
                        }

                        html += "<strong class='end'>结尾</strong>"
                        html += "<em class='next'>下一页</em>"

                        this.pagination.innerHTML = html;
                  }
            
                  add(){
                        if( this.index >= this.total_page_num - 1 ){
                              return false;
                        }
                        this.index ++
                        this.render();
                        this.renderBullet();
                  }
                  reduce(){
                        if( this.index <= 0 ){
                              return false;
                        }
                        this.index --
                        this.render();
                        this.renderBullet();
                  }
            }
            let pagination = new Pagination( data , {
                  show_num : 5
            });

            // 小任务 : 
            // 完成开头结尾功能; 
            // - 把中间显示几个页码数量提取出来; 

      </script>
</body>

</html>